import React from 'react';
import {View, Text, StyleSheet, Button, BlurView} from 'react-native';
import Login from './components/Login';
import Register from './components/Register';
import Home from './components/Home';
import Profile from './components/Profile';
import Search from './components/Search';

import 'react-native-gesture-handler';
import {createStackNavigator} from '@react-navigation/stack';
import {NavigationContainer} from '@react-navigation/native';
import {createBottomTabNavigator} from '@react-navigation/bottom-tabs';
import {Header} from 'react-native/Libraries/NewAppScreen';

import Storage from 'react-native-storage';
import AsyncStorage from '@react-native-community/async-storage';

const storage = new Storage({
  size: 1000,
  storageBackend: AsyncStorage,
  defaultExpires: 1000 * 3600 * 24,
  enableCache: true,
});
global.storage = storage;

const Stack = createStackNavigator();

const ScreenConstants = {
  APP_LOGIN_SCREEN: 'login',
  APP_REGISTER: 'register',
  APP_HOME_SCREEN: 'home',
  APP_PROFILE_SCREEN: 'profile',
  APP_SEARCH_SCREEN: 'search',
};
// const Tab = createBottomTabNavigator();

// function PageBottomNavigator() {
//   return (
//     <Tab.Navigator>
//       <Tab.Screen name="Home" component={Home} />
//       <Tab.Screen name="Search" component={Search} />
//       <Tab.Screen name="Profile" component={Profile} />
//     </Tab.Navigator>
//   );
// }

// function RouterNavigator() {
//   return (
//     <NavigationContainer>
//       <Stack.Navigator>
//         <Stack.Screen
//           name="Login"
//           component={Login}
//           // options={{title: 'Login'}}
//         />
//         {/* <Stack.Screen name="Register" component={Register} /> */}
//       </Stack.Navigator>
//     </NavigationContainer>
//   );
// }

class App extends React.Component {
  constructor(props) {
    super(props);
  }
  componentDidMount() {
    this._isLogin();
  }
  _isLogin = async () => {
    const userid = await AsyncStorage.getItem('userState');
    this.props.navigation.navigate(
      userid
        ? ScreenConstants.APP_HOME_SCREEN
        : ScreenConstants.APP_LOGIN_SCREEN,
    );
  };
  render() {
    return (
      <NavigationContainer>
        <Stack.Navigator
          initialRouteName="Login"
          screenOptions={{
            headerStyle: {
              backgroundColor: '#f4511e',
            },
            headerTintColor: '#fff',
            headerTitleStyle: {
              fontWeight: 'bold',
            },
          }}>
          <Stack.Screen name="Login" component={Login} options={{title: ''}} />
          <Stack.Screen
            name="Register"
            component={Register}
            options={{
              headerLeft: '',
            }}
          />
          <Stack.Screen
            name="Home"
            component={Home}
            options={{
              headerLeft: '',
            }}
          />
        </Stack.Navigator>
      </NavigationContainer>
    );
  }
}
console.log(JSON.stringify(Stack));
const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: 'red',
    width: 350,
    //     backgroundColor: 'red',
  },
});

export default App;

// const SimpleApp = StackNavigator(
//   {
//     Login: {
//       screen: Login,
//       navigationOptions: {
//         // 屏幕导航的默认选项, 也可以在组件内用 static navigationOptions 设置(会覆盖此处的设置)
//         headerTitle: '登陆', //设置导航栏标题
//       },
//     },
//     Register: {
//       screen: Register,
//       navigationOptions: {
//         // 屏幕导航的默认选项, 也可以在组件内用 static navigationOptions 设置(会覆盖此处的设置)
//         header: '注册', //隐藏导航栏
//       },
//     },
//     // Register: {
//     //   screen: RegisterScene,
//     //   navigationOptions: {
//     //     // 屏幕导航的默认选项, 也可以在组件内用 static navigationOptions 设置(会覆盖此处的设置)
//     //     headerTitle: '注册', //设置导航栏标题
//     //   },
//     // },
//   },
//   {
//     initialRouteName: 'Login',
//   },
// )
